<template>
  <el-select v-model="model" :disabled="disabled" :multiple="multiple" size="mini" :clearable="clearable"
    @change="handleChange" placeholder="请选择内容">
    <el-option v-for="(item,index) in datas" :key="index" :label="item[labelKey]" :value="item[valueKey]"></el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'yc-dict-select',
  props: {
    value: {
      type: [Number, String, Array],
      default: null
    },
    labelKey: {
      type: String,
      default: 'label',
      required: false
    },
    valueKey: {
      type: String,
      default: 'value',
      required: false
    },
    dictName: {
      type: String,
      default: '',
      required: false
    },
    // [自动加载字典] 自定义字典数据 设置为 false 时会自动加载对应名称的字典
    customDict: {
      type: Boolean,
      default: false,
      required: false
    },
    options: {
      type: Array,
      default: function () {
        return []
      }
    },
    // [全部] 选项
    all: {
      type: Boolean,
      default: true,
      required: false
    },
    // [全部] 选项 值
    allValue: {
      type: [Number, String],
      default: null,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      datas: []
    }
  },
  computed: {
    ...mapState('ycAdmin/dict', [
      'dicts'
    ]),
    model: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    },
    listeners () {
      return {
        ...this.$listeners
      }
    }
  },
  watch: {
    dicts () {
      this.reload()
    },
    dictName: {
      handler () {
        if (!this.customDict) this.fetch()
        this.reload()
      },
      immediate: true
    },
    options: {
      handler () {
        if (this.customDict) {
          this.reload()
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('ycAdmin/dict', {
      dictGet: 'get',
      dictFetch: 'fetch'
    }),
    fetch () {
      if (this.dictName !== '') { this.dictFetch(this.dictName) }
    },
    handleChange (val) {

    },
    async reload () {
      // 从全局状态管理中获取字典值的列表
      if (this.customDict) {
        this.datas = this.$_.cloneDeep(this.options)
      } else {
        const options = this.$_.cloneDeep(await this.dictGet(this.dictName))
        this.datas = options.map(e => {
          var value = e.value
          if (e.dictType === 1) {
            value = parseInt(e.value)
          } else if (e.dictType === 3) {
            value = e.value === 'true'
          }
          return {
            [this.labelKey]: e.label,
            [this.valueKey]: value
          }
        })
      }

      // 需要有默认值选项
      if (this.all) {
        // 默认值选项
        var index = this.datas.findIndex(e => e.value === this.allValue)
        if (index < 0) {
          this.datas.unshift({
            [this.labelKey]: '全部',
            [this.valueKey]: this.allValue
          })
        }
        this.model = this.allValue
      }
    }
  }
}
</script>
